 /**
     * ele   运动的元素
     * attr  运动的css属性名 left top width height
     * end   运动的终点值
     * fn    回调函数 => 提前决定好要执行的内容, 指定位置调用时执行
     *
     */

  


  function animate(ele,attr,end,type,fn){   // fn形参 => 接收传入的函数 => 每次运动结束执行
    // debugger;
    var cur = parseFloat(getStyle(ele,attr)); //  1. 记录运动的起始位置   2. 记录每隔10ms之后的位置  1000
    // var end = 1000;  // 终点值
    var speed = 0;

    // 多元素运动
    // 如果有多个元素同时运动 => 期望有对应个数的timer对应每一个运动的元素 => 暂停时清除对应的timer即可  

    // 解决方法
    // 将每个timer存到元素节点的属性上     元素节点 => 是一个对象 => 自定义属性(赋值一个不存在的属性)


    clearInterval(ele.timer);
    ele.timer = setInterval(function(){


        if(type == "linear"){
            // 匀速运动
            speed = end >= cur ? 10 : -10
        }else if(type == "ease-in"){
            // 加速运动   end > cur =>正向运动   end < cur  反向运动 
            speed = end > cur ? speed + 1 : speed - 1;
            // console.log(speed);

        }else if(type == "ease-out"){
            // 缓冲运动    终点值 - 当前值  => 剩余距离  / 缓冲因子  => 每次走剩余n分之1
            //            缓冲因子 => 一般在8-12之间 效果比较好

            speed = (end - cur) / 12;
            speed = speed > 0 ? Math.ceil(speed) :  Math.floor(speed);
            // console.log(speed);
        }







        cur += speed;  // 记录每隔10ms之后的位置  
        ele.style[attr] = cur + "px"; 
        // circle += 60;
        // ele.style.transform = `rotate(${circle}deg)`;

        // cur >= end
        if(Math.abs(cur - end) <= Math.abs(speed)){  //在跑一次就超了  
            clearInterval(ele.timer);
            ele.style[attr]  = end + "px";

            // 每次运动完毕之后执行
            if(fn){
                fn();
            }
        }

    },10);
}

function getStyle(ele,attr){
    if(window.getComputedStyle){
        return window.getComputedStyle(ele)[attr];
    }else{
        return ele.currentStyle[attr];
    }
}